<!DOCTYPE html>
<html>
<head>
	<title>用户详情 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="../css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="../css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="/layer/layer.js"></script>
	<style type="text/css">
		.userInfoEditCont{
			width: 100%;
		}
		.userInfoEditCont  .userInfoIcon{
			width: 20%;
			margin: 0px auto 10px;
		}
		.userInfoEditCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
		}

		/* -----  cover ----- */
		#coverCont{
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 1000;
			display: none;
		}
		.userTypeCont{
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1001;
			width: 80%;
			background: #f4f4f4;
			border: 1px solid #f1f1f1;
			border-radius: 5px;
			padding: 20px 0px 30px;
			display: none;
		}
		.userTypeCont .userTypeTitle{
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			padding: 10px 0px;
		}
		.userTypeCont .userType{
			width: 90%;
			margin: 5px auto;
			overflow: hidden;
		}
		.userTypeCont .userType .teacherType{
			width: 45%;
			padding: 10px 2%;
			float: left;
			border: 1px solid #f1f1f1;
			background: #fff;
		}
		.userTypeCont .userType .studentType{
			width: 45%;
			padding: 10px 2%;
			float: right;
			border: 1px solid #f1f1f1;
			background: #fff;
		}
		.userType .typeImg{
			width: 50%;
			margin: 0px auto 5px;
		}
		.userType .typeTitle{
			text-align: center;
			line-height: 30px;
			font-weight: bold;
			color: #333333;
		}
		.userType .typeDesc{
			font-size: 12px;
			color: #888888;
			line-height: 20px;
			text-align: center;
		}

		.submitBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			background: #888888;
			color: #fff;
			font-weight: bolder;
		}

		.userSelectCont{
			width: 100%; 
			background: #fff;
			font-size: 14px;
			overflow: hidden;
			position: fixed;
			left: 0px;
			bottom: 0px;
			display: none;
			z-index: 999;
		}
		.userSelectCont .userSelectTitle{
			width: 90%;
			padding: 0px 5%; 
			background: #fff;
			overflow: hidden;
			border-bottom: 1px solid #f1f1f1;
		}
		.userSelectCont .userSelectTitle .selectCancelBtn{
			float: left;
			color: #1f72ff;
			font-weight: bold;
			line-height: 35px;
		}
		.userSelectCont .userSelectTitle .selectOkBtn{
			float: right;
			color: #1f72ff;
			font-weight: bold;
			line-height: 35px;
		}
		.userSelectCont  .selectNumCont{
			width: 90%;
			padding: 0px 5%;
		}
		.userSelectCont  .selectNumCont .selectNum{
			overflow: hidden;
			padding: 10px 0px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectTitle{
			float: left;
			width: 100px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv{
			float: left;
			width: calc(100% - 100px);
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv ul{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv ul li{
			float: left;
			width: 24%;
			margin: 0px 0px 5px 1%;
			text-align: center;
			line-height: 25px;
		}

		.selectNum .selectNumDiv ul li.unselect{
			background: #f1f1f1;
			color: #000;
		}
		.selectNum .selectNumDiv ul li.select{
			background: #1f72ff;
			color: #fff;
		}

		.userNewPhoneDiv{
			display: none;
		}

		.gapText{
			text-align: center;
			font-size: 14px;
			color: #888888;
			margin-top: 10px;
		}
	</style>
	<script>
		function resetData() {
			$("input:eq(0)").val("");
			$("input:eq(1)").val("");
			$("input:eq(3)").val("");
		}
	</script>
</head>
<body>
<div class="content">
	<div class="headerNav">
		<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
		<div class="headerNavCont">
			<a href="index.html">快递首页</a>
			<a href="userhome.html">个人中心</a>
			<a href="delivery.html">送货上门</a>
			<a href="sendexpress.html">我要寄件</a>
			<a href="lazyboard.html">懒人排行</a>
			<a href="expassistant.html">快递助手</a>
		</div>
	</div>

	<div class="userInfoEditCont">
		<div class="userInfoIcon">
			<img src="../images/userInfoIcon.png" width="100%">
		</div>
		<div class="nickName"></div>

		<form id="iForm" method="post" target="iframe">
<!--			<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />-->
<!--			<input id="wxCode" type="hidden" value="${wxCode}" />-->
<!--			<input type="hidden" id="userId" name="userId" value="${sysWxUser.id}">-->
			<div class="userInputCont">
				<div class="inputTypeCont">
					<div class="inputTitle">新的昵称</div>
					<input type="text" class="commonInput" id="name" placeholder="请输入新的昵称">
				</div>
				<div class="inputTypeCont">
					<div class="inputTitle">新的密码</div>
					<input type="text" class="commonInput" id="password" placeholder="请输入新的密码">
				</div>
				<div class="inputTypeCont">
					<div class="inputTitle">手机</div>
					<input type="text" class="commonInputFunc userOldPhone" id="userPhone" readonly>
					<div class="commonFuncBtnModify userModifyPhone"></div>
				</div>
				<div class="inputTypeCont">
					<div class="inputTitle">短信</div>
					<input type="text" class="verifiInput" id="userCode" placeholder="请输入验证码">
					<input type="button" class="verifiBtn" value="发送验证码">
				</div>
			</div>
		</form>
		<iframe id="iframe" name="iframe" style="display:none;"></iframe>
		<div class="submitBtn">修改信息</div>
		<div class="submitBtn" onclick="resetData()">重置</div>
	</div>
</div>
</body>
	<script>
		$(function () {
			$.getJSON("/wx/getUserInfo2.do", null, function (data) {
				if (data.status === 1) {
					$("input:eq(0)").val(data.data.nickName);
				}else {
					$("input:eq(0)").val(data.data.name);
				}
				$("input:eq(1)").val(data.data.password);
				$("input:eq(2)").val(data.data.phone);
			});
			$(".verifiBtn").click(function () {
				var windowId = layer.load();
				var userPhone = $("input:eq(2)").val();
				$.post("/wx/loginSms.do", {userPhone:userPhone},function (data) {
					layer.close(windowId);
					layer.msg(data.content);
				}, "JSON");
			})
			$(".submitBtn").click(function () {
				var windowId = layer.load();
				var name = $("input:eq(0)").val();
				if (name === "") {
					layer.close(windowId);
					layer.msg("昵称不能为空！");
					$("input:eq(0)").focus();
				}
				var password = $("input:eq(1)").val();
				if (password === "") {
					layer.close(windowId);
					layer.msg("密码不能为空！");
					$("input:eq(1)").focus();
				}
				var userPhone = $("input:eq(2)").val();
				var code = $("input:eq(3)").val();
				$.getJSON("/wx/userUpdate.do", {
					name:name,
					password:password,
					userPhone:userPhone,
					code:code
				}, function (data) {
					layer.close(windowId);
					layer.msg(data.content);
					if (data.status === 0) {
						resetData();
					}
				});
			});
			$("input:eq(0)").blur(function () {
				var str = $(this).val();
				if (str.trim() === "") {
					layer.msg("昵称不能为空！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#btn").prop("disabled", true);
				}else {
					if (str.match(/^[\u4e00-\u9fff\w]{1,32}$/) === null) {
						layer.msg("昵称不合法！");
						$(this).focus();//选中input输入框
						$(this).select();//全选input输入框内输入内容
						$("#btn").prop("disabled", true);
					}else {
						$("#btn").prop("disabled", false);
					}
				}
			});
			$("input:eq(1)").blur(function () {
				var str = $(this).val();
				if (str.trim() === "") {
					layer.msg("密码不能为空！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#userRegSubmitBtn").prop("disabled", true);
				}else {
					if (str.match(/^.{6,32}$/) === null) {
						layer.msg("密码不合法！");
						$(this).focus();//选中input输入框
						$(this).select();//全选input输入框内输入内容
						$("#userRegSubmitBtn").prop("disabled", true);
					}else {
						$("#userRegSubmitBtn").prop("disabled", false);
					}
				}
			});
			$("input:eq(2)").blur(function () {
				var str = $(this).val();
				if (str.trim() === "") {
					layer.msg("手机号码不能为空！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#btn").prop("disabled", true);
				}else {
					if (str.match(/^1[3-9]\d{9}$/) === null) {
						layer.msg("请输入正确的手机号码！");
						$(this).focus();//选中input输入框
						$(this).select();//全选input输入框内输入内容
						$("#btn").prop("disabled", true);
					}else {
						$("#btn").prop("disabled", false);
					}
				}
			});
			$("input:eq(3)").blur(function () {
				var str = $(this).val();
				if (str.trim() === "") {
					layer.msg("验证码不能为空！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#btn").prop("disabled", true);
				}else {
					if (str.match(/^1\d{5}$/) === null) {
						layer.msg("验证码不合法！");
						$(this).focus();//选中input输入框
						$(this).select();//全选input输入框内输入内容
						$("#btn").prop("disabled", true);
					}else {
						$("#btn").prop("disabled", false);
					}
				}
			});
		});
	</script>
</html>